<template>
  <div class="case-search-container">
    <div class="case-search-left-container">
      <div class="bottom-chart-header">
        <div class="header-column">
          <span class="header-column-title">订单类型:</span>
          <a-select
            show-search v-model="caseType"
            placeholder="请选择"
            option-filter-prop="children"
            style="width: 67%; margin-top: 15px"
            @change="handleCaseChange"
          >
            <a-select-option value="全部">全部</a-select-option>
            <a-select-option value="故障案例">故障案例</a-select-option>
            <a-select-option value="调试案例">调试案例</a-select-option>
            <a-select-option value="工艺案例">工艺案例</a-select-option>
          </a-select>
        </div>
        <div class="header-column">
          <a-input-search v-model="searchInput" style="margin-top: 10px; padding: 5px"
                          placeholder="请输入搜索关键词" enter-button="搜 索"
                          @change="handleInputChange" @search="searchParam" />
        </div>
      </div>
      <div class="total-list-container">
        <a-list v-for="(item, index) in data" :key="item.id" :loading="loading">
          <a-list-item @click="getDetailSolution(item.id, index)"
                       @mouseover="handleMouserOver(index)"
                       @mouseleave="handleMouseLeave"
                       :style="{'background':ind === index ? '#e6f7ff':'none'}"
          >
            <div :class="item.className">{{ item.caseType }}</div>
            <div class="single-container-right">
              <div class="single-case-container-line">
                <div class="single-case-container-line-title">案例名称:</div>
                <div class="single-case-container-line-desc">{{ item.caseName }}</div>
              </div>
              <div class="single-case-container-line">
                <div class="single-case-container-line-title">{{ item.situationTitle }}:</div>
                <div class="single-case-container-line-desc">{{ item.situation }}</div>
              </div>
              <div class="single-case-container-line">
                <div class="single-case-container-line-title">{{ item.descriptionTitle }}:</div>
                <div class="single-case-container-line-desc">{{ item.description }}</div>
              </div>
              <div class="single-case-container-line">
                <div class="single-case-container-line-title">解决方案:</div>
                <div class="single-case-container-line-desc">{{ item.solutionDescription }}</div>
              </div>
            </div>
          </a-list-item>
        </a-list>
      </div>
    </div>
    <div class="case-search-right-container">
      <a-descriptions :column="column" :title="detailData.caseType || '案例名称'"
                      :class="detailData.caseClass || 'original-case-type'">
        <a-descriptions-item label="案例名称">{{detailData.caseName}}</a-descriptions-item>
        <a-descriptions-item :label="detailData.codeTitle || '适用范围'">
          {{detailData.situation}}
        </a-descriptions-item>
        <a-descriptions-item :label="detailData.solutionTitle || '调试目标'">
          {{detailData.description}}
        </a-descriptions-item>
        <a-descriptions-item label="解决方案">
          <a-row class="repair-single-row" v-for="item in detailData.solutionList" :key="item.id">
            <div class="case-detail-desc">{{item.solution}}</div>
            <div class="upload-container">
              <a-upload list-type="picture-card" :file-list="item.fileList"
                        @preview="handlePreview">
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="案例标签">{{detailData.tmp}}</a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script>
  import GLOBAL from '@/api/global_variable'
  import api from '@/server/userConfig';
  export default {
    name: 'CaseSearch',
    props: {
      userName: String
    },
    // props: {
    //   userName: {
    //     type: String,
    //     required: true,
    //     default: '13297061783'
    //   }
    // },
    data () {
      return {
        searchInput: '',
        caseType: '全部',
        data: [],
        loading: false,
        busy: false,
        column: 1,
        detailData: {},
        previewVisible: false,
        previewImage: '',
        ind: "",
      }
    },
    mounted () {
      this.getCaseList('全部', '');
    },
    methods: {
      handleMouserOver (index) {
        this.ind = index;
      },
      handleMouseLeave () {
        //this.ind = '';
      },
      // 获取案例列表;
      async getCaseList (caseType, searchInput) {
        this.loading = true;
        const res = await api.reqGetCaseList({id: 0, tags: '', type: caseType, keyword: searchInput});
        // console.log(res);
        this.loading = false;
        if (res.MsgCode !== 0) {
          this.data = [];
          return;
        }
        const result = res.Data;
        for (let i = 0; i < result.length; i++) {
          result[i].solutionDescription = result[i].solution[0].solution;
          if (result[i].caseType === "调试案例") {
            result[i].className = 'case-type-debug';
          } else if (result[i].caseType === "故障案例") {
            result[i].className = 'case-type-fault';
          } else if (result[i].caseType === "工艺案例") {
            result[i].className = 'case-type-technology';
          }
        }
        this.data = result;
      },
      // 获取案例详情;
      async getDetailSolution (id, index) {
        this.ind = index;
        const res = await api.reqGetCaseDetail({id: id});
        if (res.MsgCode !== 0) {
          return;
        }
        let result = res.Data;
        if (result.caseType === '故障案例') {
          result.codeTitle = '故障代码';
          result.solutionTitle = '相关原因';
          result.caseClass = "result-fault";
        } else if (result.caseType === '调试案例') {
          result.codeTitle = '适用范围';
          result.solutionTitle = '调试目标';
          result.caseClass = "result-adjust";
        } else if (result.caseType === '工艺案例') {
          result.codeTitle = '适用范围';
          result.solutionTitle = '工艺目标';
          result.caseClass = "result-art";
        }
        //案例库可能不存在标签或者填入空的情况
        let tmp = result.tags.slice(0, result.tags.length - 1).replace(/(^\s*)|(\s*$)/g, "");
        if (!tmp) {
          result.tmp = '';   // 案例标签;
        } else {
          result.tmp = tmp;
        }
        let solution = result.solution;
        let solutionList = [];
        const solutionLength = solution.length;
        for (let i = 0; i < solutionLength; i++) {
          solutionList.push({
            id: solution[i].id,
            solution: solution[i].solution,
            fileList: [],
          });
          for (let j = 0; j < solution[i].picture.length; j++) {
            solutionList[i].fileList.push({
              id: solution[i].picture[j].id,
              uid: -j,
              name: 'image.png',  //超级bug，这个name必须有，而且不能为空;
              status: 'done', // 状态有：uploading done error removed
              pictureNumber: solution[i].picture[j].pictureNumber,
              solutionId: solution[i].picture[j].solutionId,
              url: GLOBAL.imgDownUrl + solution[i].picture[j].pictureUrl
            })
          }
        }
        result.solutionList = solutionList;
        this.detailData = result;
      },
      // 点击搜索按钮;
      searchParam () {
        this.getCaseList(this.caseType, this.searchInput);
      },
      handleCaseChange (value) {
        this.caseType = value;
        this.getCaseList(value, this.searchInput);
      },
      handleInputChange (e) {
        this.searchInput = e.target.value;
      },
      async handlePreview (file) {
        console.log(file);
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleCancel () {
        this.previewVisible = false;
      },
    }
  }
</script>

<style scoped="scoped">
  @import "./style.css";
</style>
